// components/SearchBar.tsx
"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import { Select, Spin } from "antd";
import type { DefaultOptionType } from "antd/es/select";
import axiosInstance from "@/utils/axios";

interface SearchBarProps {
    /** 当用户选中一个选项后，将选中的值（如 species 或 genome ID）传给父组件 */
    onSearch: (selectedValue: string) => void;
    /** 如果需要限制默认选项，也可以由父组件传入 options 作为初始值（可选） */
    initialOptions?: DefaultOptionType[];
}

export default function SearchBar({
    onSearch,
    initialOptions = [],
}: SearchBarProps) {
    const [options, setOptions] = useState<DefaultOptionType[]>(initialOptions);
    const [fetching, setFetching] = useState(false);
    const fetchRef = useRef<number>(0);

    // 防抖函数：在用户停止输入 300ms 后才真正去请求
    const debounceFetch = useCallback((query: string) => {
        fetchRef.current += 1;
        const fetchId = fetchRef.current;

        setOptions([]); // 清空当前列表
        setFetching(true); // 显示加载动画

        // 用 setTimeout 简易防抖
        const handler = setTimeout(async () => {
            try {
                const res = await axiosInstance.get(
                    `/species/getOptions`,
                    {
                        params: {
                            column: "human_gene", // or "species_name"，根据你当前要搜的列
                            keyword: query, // 前端输入的关键字
                        },
                    }
                );

                // 如果在防抖期间用户又输入了新的内容，则忽略这次结果
                if (fetchId !== fetchRef.current) return;

                setOptions(res.data.data || []);
            } catch (err) {
                console.error("fetch options error:", err);
                setOptions([]);
            } finally {
                if (fetchId === fetchRef.current) {
                    setFetching(false);
                }
            }
        }, 300);

        return () => clearTimeout(handler);
    }, []);

    // 当组件卸载时，清理防抖定时器
    useEffect(() => {
        return () => {
            fetchRef.current += 1; // 保证不再 setState
        };
    }, []);

    return (
        <Select
            showSearch
            placeholder="Search by species or genome..."
            style={{ width: "100%" }}
            defaultActiveFirstOption={false}
            filterOption={false} // 关闭本地过滤，让服务端过滤
            onSearch={(value) => {
                if (value) {
                    debounceFetch(value);
                } else {
                    // 如果输入框清空，可以清空 options 或保留 initialOptions
                    setOptions(initialOptions);
                    setFetching(false);
                }
            }}
            onSelect={(value: string) => {
                onSearch(value);
            }}
            notFoundContent={fetching ? <Spin size="small" /> : null}
            options={options}
            // Antd Select 默认开启虚拟滚动，无需额外配置
            // 如果需要，可以加 virtual={{ itemHeight: 32, height: 240 }}
        />
    );
}
